<!--  -->
<template>
  <div class="collection">
    <Nav title="收藏产品">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
      <template v-slot:right>
        <span class="search mr-18"></span>
        <span class="f-14" @click="editFlag=!editFlag">{{editFlag?'完成':'管理'}}</span>
      </template>
    </Nav>
    <div class="scroll-wrap" :class="[editFlag?'pb-50':'']">
      <Scroll
        :click="false"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="productList"
        ref="myScroll"
      >
        <div class="pl-16 pr-16">
          <ProductList
            :productList.sync="productList"
            :editFlag.sync="editFlag"
            :collectList.sync="collectList"
            @tapProductItem="tapProductItem"
            @select="select"
          ></ProductList>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
    <div class="bottom-bar flex justify-between aligin-center" v-if="editFlag">
      <span :class="isSelectAll?'circle-selected':'circle'" @click="selectAll"></span>
      <span class="ml-10 f-12 mr-auto" @click="selectAll">全选</span>
      <span class="del color-red flex justify-center aligin-center" @click="collectionDel">删除</span>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import ProductList from "../../components/CollectionList";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import { userFavoriteList, favoriteDel } from "../../api/api";
export default {
  mixins: [Page],
  components: { Nav, ProductList, Scroll },
  data() {
    return {
      productList: [],
      editFlag: false,
      collectList: [],
      isSelectAll: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    collectionDel() {
      if (this.collectList.length == 0) {
        this.$notify("请选择要删除的产品");
        return;
      }
      favoriteDel({ ids: JSON.stringify(this.collectList) }).then(res => {
        this.$notify("删除成功");
        // 重置
        this.productList = [];
        this.editFlag = false;
        this.collectList = [];
        this.isSelectAll = false;
        this.current_page = 0;
        this.last_page = 1;
        this._api();
      });
    },
    selectAll() {
      if (this.isSelectAll) {
        this.collectList = [];
        this.isSelectAll = false;
      } else {
        this.collectList = this.productList.map(item => {
          return item.f_id;
        });
        this.isSelectAll = true;
      }
    },
    select(item) {
      let _index = this.collectList.findIndex(_item => {
        return _item == item.f_id;
      });
      _index == -1
        ? this.collectList.push(item.f_id)
        : this.collectList.splice(_index, 1);
    },
    tapProductItem(item) {
       this.$router.push({
          name: "detail",
          params: {
            id: item.id
          }
        });
    },
    _api() {
      userFavoriteList({ page: this.current_page + 1 }).then(
        ({ data: { result } }) => {
          if (result && result.length != 0) {
            this.productList = [...this.productList, ...result];
            this.current_page += 1;
            this.last_page = this.current_page + 1;
          } else {
            this.last_page = this.current_page;
          }
        }
      );
    }
  },
  created() {},
  mounted() {
    this._api();
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin"); //引入公共css类
.collection {
  height: 100%;
  .search {
    display: inline-block;
    height: 15px;
    vertical-align: middle;
    width: 15px;
    .bg-image("../../assets/imgs/search");
    background-size: 100% 100%;
  }
  .pb-50 {
    padding-bottom: 50px;
  }
  .scroll-wrap {
    height: calc(100% - 45px);
    overflow: hidden;
    .loading-bottom {
      width: 100%;
      text-align: center;
    }
  }
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 16px;
    height: 50px;
    width: 100%;
    box-sizing: border-box;
  }
  .del {
    width: 76px;
    height: 35px;
    border: 1px solid rgba(234, 55, 63, 1);
    border-radius: 5px;
  }
  .circle {
    width: 16px;
    height: 16px;
    background: url("../../assets/imgs/unselected@3x.png");
    background-size: 100% 100%;
  }
  .circle-selected {
    width: 16px;
    height: 16px;
    background: url("../../assets/imgs/selected@3x.png");
    background-size: 100% 100%;
  }
}
</style>